<template>
  <div>
    <div
      ref="baba"
      class="container"
      v-active="{
        className: 'item',
        activeClass: 'active',
        activeIndex,
      }"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        class="item"
        @click="activeIndex = index"
      >
        {{ item }}
      </div>
    </div>
    <button @click="add">添加</button>
  </div>
</template>

<script>
import active from "@/directive/active.js";
export default {
  directives: {
    active,
  },
  data() {
    return {
      list: [11111111, 22222222, 333333],
      activeIndex: "0",
    };
  },
  methods: {
    add() {
      this.list.push(Date.now());
  // 这里会更行数据，主要是promise 在渲染前更新
//  在nexTick的回调时在下次Dom更新结束之后执行回调 
      this.$nextTick(() => {
        console.log(this.$refs.baba);
        let babalist = this.$refs.baba;
        console.log(babalist.childNodes.length);
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.container {
  width: 500px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: pink;
  .item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
  .active {
    border: 2px solid black;
  }
}
</style>
